<!--流程表单小组件-->
<template>
  <a-drawer
    title="以起草人身份操作"
    :width="520"
    :visible="true"
    :maskClosable="drawMaskClosable"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeApplyComplete"
  >
    <div class="bottomDescribe">
      <div class="topContent">
        <div class="leftTitle">
          常用意见：
        </div>
        <div class="leftTitle" style="display:flex;">
          <div class="selectConetnt2" style="width:85%;">
            <a-select v-model="selectDefaultValue" style="width: 95%;margin-right: 15px;" @change="handleChange">
              <a-select-option v-for="(item, index) in selectData" :key="index" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </div>
          <div class="custom">
            <a-button @click="showModal">自定义</a-button>
            <a-modal v-model="modalVisible" title="自定义处理意见" centered @cancel="handleOk" v-if="modalVisible">
              <div style="margin-bottom: 1.5vh">自定义常用处理意见（每行一个）</div>
              <a-textarea
                style="width: 50vw"
                v-model="modalAreaValue"
                placeholder="请输入"
                :auto-size="{ minRows: 8, maxRows: 8 }"
              />
              <template slot="footer">
                <a-row>
                  <a-col :span="14" class="sync-content"
                         style="font-size: 14px;color: #386BD7;display: flex;justify-content: flex-start;align-items: center;padding: 8px">
                  </a-col>
                  <a-col :span="10" style="padding-right: 18px">
                    <a-button @click="handleOk">取消</a-button>
                    <a-button type="primary" @click="onSubmit">确定</a-button>
                  </a-col>
                </a-row>
              </template>
            </a-modal>
          </div>
        </div>
      </div>
      <div class="topContent">
        <div class="leftTitle">
          提出人：
        </div>
        <div class="leftTitle">
          <a-radio-group v-model="radioValue" @change="onChange">
            <a-radio v-for="(item, index) in radioData" :key="index" :value="item.routing">
              {{ item.lable }}
            </a-radio>
          </a-radio-group>
        </div>
      </div>
      
      <div class="topContent">
        <div class="leftTitle">
          处理意见：
        </div>
        <div class="leftTitle">
          <div class="textArae">
            <a-textarea
              v-model="textAreaValueInput"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
            <div class="submit" v-if="submitBtn">
              <a-button type="primary" v-if="submitBtn" @click="onCompleteWorkItem">提交</a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="closeApplyComplete">
        取消
      </a-button>
      <a-button type="primary"  @click="onCompleteWorkItem">
        确认
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import {getCustomizeOpinions, putCustomizeOpinions, userinfo} from "@api/middleGround";
import {completeRunningWorkItemBySelf} from "@api/fileSingle";
import _ from "lodash"
export default {
  name: 'bottomDescribe',
  data() {
    return {
      radioValue: '撤回',
      modalVisible: false,
      modalAreaValue: '',
      selectDefaultValue: '请选择',
      selectData: [],//下拉框数
      // textAreaValueInput:this.textAreaValue
      textAreaValueInput: '',
      fileSingleItemOid:'',    //交付物的oid
      userInfo:'',                            //用户信息
    }
  },
  props: {
    radioData: { // 单选框数据
      type: Array,
      default: () => [
        {
          routing: '撤回',
          lable: '撤回'
        },
        {
          routing: '废弃',
          lable: '废弃'
        }
      ]
    },
    /*textAreaValue: { //文本框数据
      type: String
    },*/
    submitBtn: {
      type: Boolean,
      default: false,
    },
    drawMaskClosable: {
      type: Boolean,
      default: true
    },//点击蒙层是否允许关闭
  },
  mounted() {
    this.fileSingleItemOid = JSON.parse(sessionStorage.getItem('fileSingleTableItem')).singleOid
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getCustomizeOpinionsData()
  },
  methods: {
    //关闭抽屉
    closeApplyComplete() {
      this.$emit('closeDraw')
    },
    onChange(e) { // 单选框
      this.$emit('radioChange', e.target.value)
    },
    handleChange(value) { // 点击下拉框
      // this.$emit('selectChange', value)
      this.textAreaValueInput = value
    },
    showModal() {
      this.modalVisible = true;
    },
    handleOk(e) {
      this.modalVisible = false;
      // this.$emit('modelValue', this.modalAreaValue) // 点击弹框
    },
    onSubmit() {
      if (this.modalAreaValue == '') {
        this.$message.error('请输入意见！')
      } else {
        let parm =
          {
            "opinion": _.replace(this.modalAreaValue, /\r\n|\n|\r/g, ','),
            "userId": userinfo.loginName
          }
        putCustomizeOpinions(parm).then(res => {
          if (res.status === 200 && res.data) {
            this.modalVisible = false;
            this.getCustomizeOpinionsData()//刷新自定义意见
            this.$message.success('设置自定义意见成功！')
          } else {
            this.$message.error('设置自定义意见失败！')
          }
        })
      }
    },
    //获取自定义审核意见
    getCustomizeOpinionsData() {
      let parm = {
        "userId": userinfo.loginName
      }
      getCustomizeOpinions(parm).then(res => {
        if (res.status === 200 && res.data) {
          if (res.data.opinion.length > 0) {
            this.selectData = res.data.opinion.split(',')
            this.modalAreaValue = _.replace(this.selectData.toString(), /,/g, '\r\n')
          } else {
            this.selectData = []
            this.modalAreaValue = ''
          }
        } else {
          this.$message.error('获取自定义意见失败！')
        }
      })
    },
    //完成提交
    onCompleteWorkItem() {
        let params = {
          oid: this.fileSingleItemOid,
          userId: this.userInfo.loginName,
          comment: this.selectDefaultValue, 
          routeChoice: this.radioValue,
        };
        console.log(params);
        completeRunningWorkItemBySelf(params).then((res) => {
          if (res.status === 200) {
            if (res.data.success) {
              this.$message.success("操作成功");
              this.$emit("closeDraw");
              this.$router.push({
                path:"/toDoPage"
              })
            }
          }
        });
        // this.visible = false;
    }
  }
}
</script>
<style lang="less" scoped>
.bottomDescribe {
  //border: 1px solid #d9d9d9;
  .topContent {
    // display: flex;
    //border-bottom: 1px solid #d9d9d9;
    .leftTitle {
      width: 100%;
      padding: 0px 0px 10px 0px;
      //background-color: #F6F6F6;
      //border-right: 1px solid #d9d9d9;
    }
    .custom{
      display: flex;
      flex: 1;
    }
   
    .rightContent {
      width: 400px;
      flex: 1;
      padding: 0px 0px 10px 0px;
      display: flex;
      justify-content: flex-start;
      .selectConetnt {
        width: 300px;
        margin-right: 10px;
      }
      .selectConetnt2 {
        width: 90%;
        margin-right: 10px;
      }
      /deep/ .ant-radio-group {
        .ant-radio-wrapper {
          margin-right: 1vw;
          span.ant-radio + * {
            padding-right: 8px;
            padding-left: 4px;
          }
        }
      }
      .textArae {
        width: 380px;
        .submit {
          margin-top: 10px;
          width: 170px;
          color: #fff;
          //background-color: #386bd7;
          padding: 0px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>